<template>
	<view class="menu-box left clearfix">
		<view class="menu-breadcrumb left clearfix">
			<uni-breadcrumb separator="/" style="width:300px;float:left;">
			  <uni-breadcrumb-item v-for="(route,index) in routes" :key="index" :to="route.to">
			    {{route.name}}
			  </uni-breadcrumb-item>
			</uni-breadcrumb>
			<view class="add-bottons right" @click="navigateToPage('goods-add')">
				新增
			</view>
			<view class="menu-so right clearfix">
				<input placeholder="请输入关键词搜一搜" v-model="keyword" />
				<view class="menu-so-icon right" @click="getDataByKeyword()">
					<uni-icons type="search" size="25" color="#999"></uni-icons>
				</view>
			</view>
			
		</view>
		
		<view class="menu-content left clearfix">
			<view class="menu-table left clearfix">
				<!--头部-->
				<view class="menu-tr left clearfix" style="font-weight:bold;color:#909399">
					<view class="menu-sort left" style="width:50px;">
						序号
					</view>
					<view class="menu-title left" style="width:50px;">
						主图
					</view>
					<view class="menu-title left" style="padding-left:10px;">
						标题
					</view>
					
					<view class="menu-title left" style="width:150px;">
						分类
					</view>
					
					
					<view class="menu-title left" style="width:100px;">
						销量
					</view>
					<view class="menu-title left" style="width:70px;">
						浏览量
					</view>
					<view class="menu-title left" style="width:100px;">
						展示
					</view>
					<view class="menu-title left" style="width:200px;">
						发布时间
					</view>
					<view class="menu-title left" style="width:150px;border-right:none;">
						操作
					</view>
				</view>
				
				
				
				
				<view  v-for="(item,index) in data">
				<view class="menu-tr left clearfix" style="color:#606266;">
					<view class="menu-sort left" style="width:50px;">
						{{index + 1}}
					</view>
					<view class="menu-title left" style="width:50px;" @click="navigateToDetail(item._id)" v-if="item.images && item.images[0] && item.images[0].fileID">
						<image :src="item.images[0].fileID||'/static/images/wutu.png'" mode="aspectFill" style="width:30px;height:30px;margin:10px;"></image>
					</view>
					
					<view class="menu-title left" style="width:50px;" @click="navigateToDetail(item._id)" v-else>
						<image src="/static/images/wutu.png" mode="aspectFill" style="width:30px;height:30px;margin:10px;"></image>
					</view>
					
					
					<view class="menu-title left ellipsis" style="text-align: left;padding-left:10px;font-weight:500;"  @click="navigateToDetail(item._id)">
						<label>
							<uni-icons :type="item.icon" size="15" color="#666" custom-prefix="iconfont"></uni-icons>
						</label>
						<label>
							 {{item.title.substring(0,30)}}
						</label>
						
					</view>
					
					<view class="menu-title left ellipsis" style="width:150px;">
						{{item.category[0]}}-{{item.category[1]}}
					</view>
					
					<view class="menu-title left" style="width:100px;">
						{{item.sales}}
					</view>
					<view class="menu-title left" style="width:70px;">
						{{item.page_view}}
					</view>
					<view class="menu-title left" style="width:100px;text-align: center;" @click="setShelf(index,item)">
						<label v-if="item.is_shelf==false" style="color:#ccc;width:100px;float:left;text-align: center;">
							--
						</label>
						<label v-else-if="item.is_shelf==true" style="width:100px;float:left;text-align: center;">
							<uni-icons type="icon-duigou3" size="16" color="#00c296" custom-prefix="iconfont"></uni-icons>
						</label>
					</view>
					
					<view class="menu-title left" style="width:200px;">
						<uni-dateformat :date="item.create_date"></uni-dateformat>
					</view>
					
					<view class="menu-title left" style="width:250px;border-right:none;">
						
						<view class="buttons left" @click="navigateToPage('goods-en-edit',item._id)">
							编辑英文
						</view>
						
						<view class="buttons left" @click="navigateToPage('goods-edit',item._id)">
							编辑中文
						</view>
						
						<view class="buttons-del left" @click="remove(item,index)">
							删除
						</view>
						
					</view>
					
					
					
				</view>
				
				
			</view>
				
				
				
				
				
				
				
			</view>
			
			
			<!--分页-->
			<view class="pagenation-box left clearfix"  v-if="data && data[0] && data[0]._id && page">
				<uni-pagination :show-icon="true" :pageSize="20" :current="currentPage" :total="total" @change="getDataByPage" title="标题文字" />
			</view>
		</view>
	</view>
</template>


<style scoped lang="scss">
	.menu-so-icon{width:30px;height:30px;line-height:30px;cursor:pointer;}
	.menu-so input{width:200px;line-height:30px;height:30px;padding-left:5px;font-size:13px;float:left;}
	.menu-so{width:300px;height:30px;border:1px solid #eee;margin-top:10px;border-radius: 5px;margin-right:20px;}
	.pagenation-box{width:100%;height:50px;text-align: center;margin-top:50px;}
	.menu-title label{float:left;margin-right:5px;}
	.menu-title{width:calc(100% - 1000px);height:45px;border-right:1px solid #eee;line-height:45px;text-align:center;font-size:14px;}
	.menu-sort{width:100px;height:45px;line-height:45px;text-align:center;font-size:14px;border-right:1px solid #eee;}
	.menu-tr:hover{background:#f8f8f8;}
	.menu-tr{width:100%;height:45px;border-bottom:1px solid #eee;}
	.menu-table{width:100%;border:1px solid #eee;border-bottom:none;}
</style>

<script>
	var global = uniCloud.importObject('global',{customUI:true});
	var db = uniCloud.database();
	export default {
		name:"system-menu",
		data() {
			return {
				keyword:'',
				total:0,
				data:[],
				page:1,
				routes: [
				        {
				          to: "/A",
				          name: "商品管理",
				        },
				        {
				          to: "/B",
				          name: "商品列表",
				        }
				      ],
			};
		},
		mounted() {
			this.getData();
		},
		props:{
			currentPage:{
				type:Number,
				default:1
			}
		},
		methods:{
			//根据关键词查询数据
			getDataByKeyword(){
				var keyword = this.keyword;
				this.getData(keyword);
			},
			//设置上下架
			setShelf(index,item){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要更改展示状态吗？',
					success: function (res) {
						if (res.confirm) {
							var shelf = item.is_shelf;
							var shelfVal = !shelf;
							db.collection('goods').where({_id:item._id}).update({is_shelf:shelfVal}).then(res=>{
								that.data[index].is_shelf = shelfVal;
							});
						}
					}
				});
				
				
			},
			//跳转到详情页
			navigateToDetail(id){
				window.open("http://www.kungshu.com/#/pages/productDetails/productDetails?_id="+id, "_blank");
			},
			//分页获取数据
			getDataByPage(e){
				var page = e.current;
				uni.navigateTo({
					url:'/pages/index/index?page=goods-list&p='+page
				})
			},
			//删除
			remove(item,index,children=false){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '删除后将无法恢复，确定要删除吗？',
					success: function (res) {
						if (res.confirm) {
							db.collection('goods').where({_id:item._id}).remove().then(res=>{
								//减去分类商品数量
								global.updateGoodsNumberByCategory(item.category_id,'dec');
								that.data.splice(index,1);
							});
						}
					}
				});
			},
			//获取列表
			getData(keyword = null) {
			    uni.showLoading({
			        title: '加载中'
			    })
			    
			    let where = {};
			    if (keyword) {
			        // 使用数据库的模糊查询语法，%表示任意字符
			        where = {
			            $or: [
			                { title: { $regex: keyword, $options: 'i' } },
			                { en_title: { $regex: keyword, $options: 'i' } }
			            ]
			        };
			    }
			    
			    var skip = (this.currentPage - 1) * 20;
			    
			    // 将查询条件传入where方法
			    db.collection('goods')
			      .where(where)
			      .orderBy('create_date', 'desc')
			      .skip(skip)
			      .limit(20)
			      .get({ getCount: true })
			      .then(res => {
			          console.log('获取结果', res);
			          uni.hideLoading();
			          this.data = res.result.data;
			          this.total = res.result.count;
			          this.page = this.currentPage;
			      })
			      .catch(err => {
			          console.error('查询失败', err);
			          uni.hideLoading();
			      });
			},
			//新增菜单
			navigateToPage(item,id,newAdd=false){
				var page = '/pages/index/index?page='+item+'&id='+id;
				if(newAdd!=false){
					page = page + '&newAdd='+newAdd
				}
				console.log('page',page);
				uni.navigateTo({
					url:page
				})
				
				
			}
		}
	}
</script>
